<template>
<div>
   <ISearch @resetSubmitFun="resetSubmitFun" @searchSubmitFun="searchSubmitFun" :searchOptions="searchOptions"></ISearch>
       <lib-doc :libDocData="libDocData"></lib-doc>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { ISearch } from 'wd-platform-library'
import { SearchInterFace } from 'wd-platform-library/lib/src/ISearch/src/ISearchInterFace'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
interface searchParamInterface{
    cascaderList:null|string[];
}

export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const dataList = [
            {
                id: 10891065345474561,
                menuName: '权限管理',
                children: [
                    {
                        id: 10948510534696991,
                        menuName: '角色管理'
                    },
                    {
                        id: 10948510534697001,
                        menuName: '菜单管理'
                    },
                    {
                        id: 10948510534697011,
                        menuName: '用户管理'
                    },
                    {
                        id: 10948510534697021,
                        menuName: '资源管理'
                    },
                    {
                        id: 10948510534697031,
                        menuName: '资源组管理'
                    }
                ]
            },
            {
                id: 10948510534696971,
                menuName: '系统管理',
                children: [
                    {
                        id: 10948510534697041,
                        menuName: '应用管理'
                    },
                    {
                        id: 1094851053469705,
                        menuName: '机构管理'
                    }
                ]
            }
        ]
        const searchOptions:SearchInterFace<searchParamInterface> = reactive({
            form: {
                cascaderList: null
            },
            fieldDataList: [
                {
                    labelWidth: 90,
                    type: 'cascader', // form表单类型
                    label: '级联选择框', // 字段描述信息
                    field: 'cascaderList', // form 对应字段
                    options: {
                        fieldNames: { label: 'menuName', value: 'id', children: 'children' }
                    },
                    callback: (data: any) => {
                        alert(data)
                    },
                    dataList: dataList
                }
            ]
        })
        const searchSubmitFun = () => {
            alert(JSON.stringify(searchOptions.form))
        }
        const resetSubmitFun = () => {
            searchOptions.form = {
                cascaderList: null
            }
            alert(JSON.stringify(searchOptions.form))
        }

        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '引入组件',
                    type: 'pre',
                    value: `
        import { ISearch } from 'wd-platform-library'
        <ISearch @resetSubmitFun="resetSubmitFun" @searchSubmitFun="searchSubmitFun" :searchOptions="searchOptions"></ISearch> `
                },
                {
                    label: '创建搜索条件对象',
                    type: 'pre',
                    value: `
        const searchOptions:SearchInterFace<searchParamInterface> = reactive({
            form: {
                cascaderList: null
            },
            fieldDataList: [
                {
                    labelWidth: 90,
                    type: 'cascader', // form表单类型
                    label: '级联选择框', // 字段描述信息
                    field: 'cascaderList', // form 对应字段
                    options: {   //antdv cascader自身配置
                        fieldNames: { label: 'menuName', value: 'id', children: 'children' }
                    },
                    callback: (data: any) => {  //选择后回调
                        alert(data)
                    },
                    dataList: dataList  //数据集合
                }
            ]
        })`
                },
                {
                    label: '提交重置回调',
                    type: 'pre',
                    value: `
    const searchSubmitFun = () => {
        alert(JSON.stringify(searchOptions.form))
    };//点击搜索回调方法
    const resetSubmitFun = () => {
        searchOptions.form = {
            cascaderList: null
        }
        alert(JSON.stringify(searchOptions.form))
    }; //点击重置回调方法`
                }

            ]
        }
        return {
            searchOptions,
            searchSubmitFun,
            resetSubmitFun,
            libDocData
        }
    },
    components: {
        ISearch,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template{
    display: flex;
}
</style>
